<?php
use yii\helpers\Url;

$web = Url::base();

$site_name = \app\models\Mall::getCurrentInstitutionSiteName();
$this->title = $site_name . '-用户登录';
?>

<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/login.css"/>

<style type="text/css">
    .bg {
        background-image: url(<?= $web ?>/images/mall-m/login-bg.png);
    }
</style>

<div class="main">
    <div class="bg"></div>
    <form class="login-form" action="login?return_url=<?= $return_url ?>" method="post">
        <div class="phone-num">
            <img src="<?= $web ?>/images/mall-m/login-phone-icon.png"/>
            <div class="spliter"></div>
            <input id="txtPhone" type="tel" name="phone" placeholder="请输入手机号码"/>
            <div class="input-bg"></div>
        </div>
        <div class="verify">
            <input class="verify-input" type="text" name="verification_code" value="" placeholder="请输入短信验证码"/>
            <a id="btnSmsVerificationCode" class="btn-verify">获取验证码</a>
            <div class="spliter"></div>
        </div>
        <input class="btn-login" type="submit" value="登录"/>
    </form>

    <script type="text/javascript">
        $(function () {
            $('#btnSmsVerificationCode').click(function () {
                if ($(this).hasClass('btn-verify-disabled')) {
                    return;
                }

                $(this).addClass('btn-verify-disabled');
                $(this).text('正在获取...');
                var phone = $('#txtPhone').val().trim();
                if (phone.length == 0) {
                    alert('请输入手机号码');
                    $(this).text('获取验证码');
                    $(this).removeClass('btn-verify-disabled');
                    $('#txtPhone').focus();
                    return;
                }
                var that = this;
                requestJson('send-login-sms-verification-code-handler', {phone: phone}, true, function (responseData) {
                    if (responseData.status != 0) {
                        $(that).text('获取验证码');
                        $(that).removeClass('btn-verify-disabled');
                        alert(responseData.message);
                    } else {
                        verifyTimeoutValue = 60;
                        verifyTimeout();
                    }
                }, function () {
                    $(that).text('获取验证码');
                    $(that).removeClass('btn-verify-disabled');
                });
            });

            $('#txtPhone').focus();
        });

        var verifyTimeoutValue = 0;
        function verifyTimeout() {
            if (verifyTimeoutValue > 0) {
                $('#btnSmsVerificationCode').text('重新获取(' + verifyTimeoutValue + ')');
                verifyTimeoutValue--;
                setTimeout(verifyTimeout, 1000);
            } else {
                $('#btnSmsVerificationCode').text('获取验证码');
                $('#btnSmsVerificationCode').removeClass('btn-verify-disabled');
            }
        }
    </script>
</div>
